<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="never"/>
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            font-size: 12px;
            position: relative;
            margin-left: 30px;
            margin-right: 30px;
        }

        .item {
            position: absolute;
        }

        .item .img {
            border-radius: 10px;
            overflow: hidden;
        }

        .item .img img {
            background-image: linear-gradient(to top right, #f0f0f0 25%, transparent 0, transparent 75%, #f0f0f0 0, #f0f0f0), linear-gradient(to top right, #f0f0f0 25%, transparent 0, transparent 75%, #f0f0f0 0, #f0f0f0);
            background-color: #fff;
            background-size: 16px 16px;
            background-position: 0 0, 8px 8px;
        }

        .item .info {

            padding: 6px 0;
        }

        .item .info .head-pic {
            display: flex;
            align-items: center;


        }

        .item .info .head-pic img {
            width: 20px;
        }

        .item .info .head-pic span {
            line-height: 1;
            padding-left: 10px;
        }

        .item .zhuancai {
            padding: 3px 0;
        }

        .item .zhuancai .zc {
            width: 16px;
            height: 16px;
        }

        .item .zhuancai span {
            color: #999;
        }
    </style>
</head>

<body>
    <div id="box" class="box">
        <!-- <div class="item" style="top: 0; left: 0;width: 240px; height: 200px">
            <div class="img">
                <img src="https://hbimg.huabanimg.com/2f57bd2d9d23c3748e55692ceaee3d9b7e71f396489a0c-NUJ6xh_fw240/format/webp"
                    alt="">
            </div>
            <div class="info">
                <div class="head-pic">
                    <img src="https://hbimg.huabanimg.com/b2894c81d3c3cb172f4b777da71a6014e2d450885439-EELujE_sq75/format/webp"
                        alt="">
                    <span>传奇的阳光</span>
                </div>
                <div class="zhuancai">
                    <span class="zc">
                       <img src="./icon.png" alt="">
                    </span> <span>151</span>
                </div>
            </div>
        </div> -->


    </div>
    <!-- 分析：瀑布流就是一个页面效果。具体表现为：有N列，每一列定宽，当页面大小改变的时候，列数发生变化。当用户往下拖到底的时候，页面中的数据会增加（本质就是发送了新的请求渲染了新的元素增加到了页面的底部） -->
    <script src="QF.js"></script>
    <script src="lodash.js"></script>
    <script>
        // 获取元素
        var box = document.getElementById("box");
        // 图片的宽度
        const WIDTH = 240;
        // 定义数据的发送序号
        var page = 0;
        // 整个容器宽度
        var width = 0;
        // 剩余部分宽度
        var otherWidth = 0;
        // 列数
        var col = 0;
        // 相邻列之间的间隔
        var jg = 0;
        // 定义一个数组 数组表示每一个列的高度
        var arr = [];
        // 当页面一开始加载的时候 我们初始化一系列数据
        function init() {
            box.innerHTML = '';
            // 获取box的宽度
            width = box.clientWidth;
            // 定义一个列的宽度
            // 求除列之外的剩余宽度
            otherWidth = width % 240
            // 求列数
            col = parseInt(width / 240);
            // 缝隙
            jg = parseInt(otherWidth / col);
            // 把数组更新 
            arr = new Array(col).fill(0);
        }

        // 初始化数据
        init();

        // 发送第一次
        sendAjax(page);
        // 发送完之后 下一次发送要请求下一页 所以+1
        page++;

        // 封装的发送请求的函数
        function sendAjax(id) {
            // 发送请求
            QF.get("/lession02/getImgsById", { id }, function (data) {
                console.log(data)
                // 获取后端返回的数据
                var { error, data, message } = data;

                // 判断 如果还有数据 当然可以渲染 但是如果没有数据就不要渲染了 
                if (error) {
                    alert(message);
                    return;
                }
                // 获取数组
                var { pins } = data;
                //  循环根据数据创建元素
                pins.forEach((val, index) => {
                    // setTimeout(() => {
                    var div = document.createElement("div");
                    div.className = "item";
                    div.innerHTML = `
                            <div class="img">
                                <img src="https://hbimg.huabanimg.com/${val.file.key}_fw240/format/webp"
                                    alt="">
                            </div>
                            <div class="info">
                                <div class="head-pic">
                                    <img src="https://hbimg.huabanimg.com/${val.user.avatar.key}_sq75/format/webp"
                                        alt="">
                                    <span>${val.user.username}</span>
                                </div>
                                <div class="zhuancai">
                                    <span class="zc">
                                    <img src="./icon.png" alt="">
                                    </span><span>${val.repin_count}</span>
                                </div>
                            </div>
                        `;
                    // 根据数组计算当前div的left 和 top
                    // 获取当前数组中的最小值
                    var minValue = Math.min(...arr);
                    // 获取数组中最小值的下标
                    var minIdx = arr.indexOf(minValue);
                    // minIdx代表列数  第一个列就是二分之一的间隔 第二个列就再额外增加一个宽度和一个间隔 以此类推
                    div.style.left = minIdx * (WIDTH + jg) + jg / 2 + "px";
                    div.style.top = minValue + "px";

                    // 因为图片有一个加载过程 所以刚刚上树的时候 是有可能得不到图片的高度 也有可能能得到 于是我们就利用图片的原始尺寸(后端返回的数据中有) 等比例缩小成 width 240 高度也会等比例缩小
                    // 已知图片的宽度是 1024 图片的高度是 681 将图片等比例缩小成宽度 240 求高度会是多少？
                    // 1024    240
                    // ---- =  ---
                    // 681      x
                    // x代表实际占页面的高度
                    var x = parseInt(WIDTH * val.file.height / val.file.width);
                    box.appendChild(div);
                    // 更新数组
                    arr[minIdx] += x + 68;

                    // 更新容器高度
                    box.style.height = Math.max(...arr) + "px";
                    // }, index * 1000)
                })
            })
        }


        // 当改变页面尺寸的时候
        window.onresize = _.debounce(function () {
            // 获取现有的元素
            var nowElements = Array.from(box.childNodes);
            console.log(nowElements)
            // HTMLCollection 和 NodeList 这两种类型的不同 
            // HTMLCollection是动态的 
            // 执行的代码
            // 1 清空现有的元素
            // 2 获取新的宽度
            // 3 计算新的列数
            // 4 计算新的间隔
            init();
            // 5 重新把元素渲染到新的列中
            nowElements.forEach((val, index) => {
                // 获取当前数组中的最小值
                var minValue = Math.min(...arr);
                // 获取数组中最小值的下标
                var minIdx = arr.indexOf(minValue);
                // 把val设置到对应的坐标去
                val.style.left = minIdx * (WIDTH + jg) + jg / 2 + "px";
                val.style.top = minValue + "px";
                // 上树
                box.appendChild(val)
                // 更新数组
                arr[minIdx] += val.offsetHeight;
            })
        }, 150)


        // 当用户往下拖动的时候 如果用户拉到底部 应该发送新的请求 渲染新的元素
        window.onscroll = _.debounce(function () {
            // 判断是否到达底部
            // 获取视口高度 innerHeight
            // 页面卷动值
            var scrollTop = Math.ceil(document.documentElement.scrollTop || document.body.scrollTop);
            // 获取页面高度
            var pageHeight = document.body.clientHeight;
            // 说明到底了 
            // if (scrollTop + innerHeight >= pageHeight) {
            //     // 发送新的请求请求新的数据渲染新的元素撑起页面的高度
            //     sendAjax(page)
            //     page++;
            // }
            // 一般来说 如果不是特殊情况 我们应当提前一点点发送请求 
            if (scrollTop + innerHeight >= pageHeight - 200) {
                // 发送新的请求请求新的数据渲染新的元素撑起页面的高度
                sendAjax(page)
                page++;
            }
        }, 200)
   
        
        // window.onload只会监听一开始就在页面中的资源  后续通过JS脚本创建的资源不会再次引发window.onload  
        // window.onload = function() {
        //     console.log(1)
        // }
   </script>
</body>

</html>